<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="m1280 tabs f hand f-a-c">
			<div @click="goBackThree" class="home f f-a-c">Home <img src="/src/assets/6.png" class="img" alt="" /></div>
			<div @click="goBackTow" class="home f hand f-a-c">Help <img src="/src/assets/6.png" class="img" alt="" /></div>
			<div @click="goBack" class="hand home f f-a-c">FAQ <img src="/src/assets/6.png" class="img" alt="" /></div>
			<div class="how">{{ obj.title }}</div>
		</div>
		<div style="margin-top: 50px; margin-bottom: 80px" v-html="obj.content" class="m1280"></div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { FaqsListDetilss } from "@/api/knowClub/index.js";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { useRoute } from "vue-router";
	let statusTab = ref(1);
	let route = useRoute();
	let obj = ref({});
	let id = route.query.id;
	onMounted(() => {
		initObj();
		window.addEventListener("scroll", handleScroll);
	});
	const initObj = async () => {
		let n = await FaqsListDetilss({
			id: id
		});
		obj.value = n.data;
	};
	const goBack = () => {
		router.go(-1);
	};
	const goBackTow = () => {
		router.go(-2);
	};
	const goBackThree = () => {
		router.go(-3);
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style lang="scss" scoped>
	.tabs {
		.how {
			font-size: 14px;
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: CENTER;
			color: #8590a1;
		}
		.home {
			font-size: 14px;
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: CENTER;
			color: #02102e;
			margin-right: 8px;
			.img {
				width: 6px;
				height: 12px;
				margin-left: 8px;
			}
		}
	}
</style>
